<template>
  <div>
    <table
      border="1"
      width="700"
      style="border-collapse: collapse"
    >
      <caption>
        购物车
      </caption>
      <thead>
        <tr>
          <th>
            <input type="checkbox" v-model="isAll"  /> <span>全选</span>
          </th>
          <th>名称</th>
          <th>价格</th>
          <th>数量</th>
          <th>总价</th>
          <th>操作</th>
        </tr>
      </thead>

        <!-- 组件 -->
<shop-main :shopping="goodList"   />

     <all-count  :allCount="heji">{{heji}}</all-count>

    </table>
  </div>
</template>

<script>
import AllCount from './components/AllCount.vue'
import ShopMain from './components/ShopMain.vue'

export default {
  components: { ShopMain, AllCount },
  data () {
    return {
      goodList: [
        {
          name: '诸葛亮',
          price: 1000,
          num: 1,
          checked: false
        },
        {
          name: '蔡文姬',
          price: 1500,
          num: 1,
          checked: false
        },
        {
          name: '妲己',
          price: 2000,
          num: 1,
          checked: false
        },
        {
          name: '鲁班',
          price: 2200,
          num: 1,
          checked: false
        }
      ]

    }
  },
  computed: {
    isAll: {
      get () {
        return this.goodList.every(item => item.checked)
      },
      set (val) {
        // console.log(val)
        // value是要改的值 但是没有改成功 即点击全选value=true
        return this.goodList.forEach(item => { item.checked = val })
      }
    },
    heji () {
      let mony = 0
      this.goodList.forEach(item => {
        if (item.checked === true) {
          mony += item.num * item.price
        }
      })
      return mony
    }

  }

}

</script>

<style>
</style>
